<template>
  <div>
    <h1>Alert 警告提示</h1>
    <h2>概述</h2>
    <p>静态地呈现一些警告信息，可手动关闭。</p>
    <h2>基础用法</h2>
    <div class="testAlert">
      <Alert type="success" description="成功提示的文案"></Alert>
      <Alert type="info" description="消息提示的文案"></Alert>
      <Alert type="warning" description="警告提示的文案"></Alert>
      <Alert type="error" description="错误提示的文案"></Alert>
    </div>
    <p>基本使用方法，有四种 <code>type</code> 样式可以选择 <code>success</code> 、<code>info</code> 、<code>warning</code> 、<code>error</code> 。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Alert type=&quot;success&quot; description=&quot;成功提示的文案&quot;&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;info&quot; description=&quot;消息提示的文案&quot;&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;warning&quot; description=&quot;警告提示的文案&quot;&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;error&quot; description=&quot;错误提示的文案&quot;&gt;&lt;/Alert&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>自定义关闭按钮</h2>
    <div class="testAlert">
      <Alert type="success" description="不可关闭的 alert" :closable="isClosable"></Alert>
      <Alert type="info" description="自定义 closeText" :closeText="ctext"></Alert>
      <Alert type="warning" description="设置了回调的 alert" @close="clickClose"></Alert>
    </div>
    <p>在 <code>Alert</code> 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。</p>
    <p> <code>closable</code> 属性决定关闭按钮的显示， <code>boolean</code> 类型，默认为 <code>true</code> ，显示 。</p>
    <p>设置 <code>closeText</code> 属性来代替右侧的关闭图标，注意： <code>closeText</code> 必须为文本。设置 <code>close</code> 事件来设置关闭时的回调。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Alert type=&quot;success&quot; description=&quot;不可关闭的 alert&quot; :closable=&quot;isClosable&quot;&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;info&quot; description=&quot;自定义 close-text&quot; :closeText=&quot;ctext&quot;&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;warning&quot; description=&quot;设置了回调的 alert&quot; @close=&quot;clickClose&quot;&gt;&lt;/Alert&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data(){
          return {
            isClosable: false,
            ctext:"知道了!"
          }
        },
        methods:{
          clickClose() {
            alert('你好！我是回调函数~')
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>带有 Icon 的</h2>
    <div class="testAlert">
      <Alert type="success" description="成功提示的文案" showIcon></Alert>
      <Alert type="info" description="信息提示的文案" showIcon></Alert>
      <Alert type="warning" description="警告提示的文案" showIcon></Alert>
      <Alert type="error" description="错误提示的文案" showIcon></Alert>
    </div>
    <p>通过设置 <code>showIcon</code> 属性来显示 <code>Alert</code> 的 <code>icon</code> 图标，可以更有效地向用户展示你的显示意图。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Alert type=&quot;success&quot; description=&quot;成功提示的文案&quot; showIcon&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;info&quot; description=&quot;信息提示的文案&quot; showIcon&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;warning&quot; description=&quot;警告提示的文案&quot; showIcon&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;error&quot; description=&quot;错误提示的文案&quot; showIcon&gt;&lt;/Alert&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>文字居中</h2>
    <div class="testAlert">
      <Alert type="success" description="成功提示的文案" center></Alert>
      <Alert type="info" description="成功提示的文案" center></Alert>
      <Alert type="warning" description="成功提示的文案" center></Alert>
      <Alert type="error" description="成功提示的文案" center></Alert>
    </div>
    <p>使用 <code>center</code> 属性让文字水平居中。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Alert type=&quot;success&quot; description=&quot;成功提示的文案&quot; center&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;info&quot; description=&quot;成功提示的文案&quot; center&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;warning&quot; description=&quot;成功提示的文案&quot; center&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;error&quot; description=&quot;成功提示的文案&quot; center&gt;&lt;/Alert&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>带有辅助性文字介绍</h2>
    <div class="testAlert">
      <Alert type="success" title="带辅助性文字介绍" description="文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍..."></Alert>
    </div>
    <p>添加 <code>title</code>属性后，<code>Alert</code>组件就会具有带有标题的辅助性介绍功能。这时需要设置 <code>description</code> 属性编写标题下的文本，且会自动换行。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Alert type=&quot;success&quot; title=&quot;带辅助性文字介绍&quot; description=&quot;文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍...&quot;&gt;&lt;/Alert&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>带有 Icon 和辅助性文字介绍</h2>
    <div class="testAlert">
      <Alert type="success" title="成功提示的文案" description="文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍" showIcon></Alert>
      <Alert type="info" title="消息提示的文案" description="文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍" showIcon></Alert>
      <Alert type="warning" title="警告提示的文案" description="文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍" showIcon></Alert>
      <Alert type="error" title="错误提示的文案" description="文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍" showIcon></Alert>
    </div>
    <p>通过设置 <code>showIcon</code> 属性来显示 <code>Alert</code> 的 <code>icon</code> 图标。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Alert type=&quot;success&quot; title=&quot;成功提示的文案&quot; description=&quot;文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍&quot; showIcon&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;info&quot; title=&quot;消息提示的文案&quot; description=&quot;文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍&quot; showIcon&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;warning&quot; title=&quot;警告提示的文案&quot; description=&quot;文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍&quot; showIcon&gt;&lt;/Alert&gt;
        &lt;Alert type=&quot;error&quot; title=&quot;错误提示的文案&quot; description=&quot;文字说明介绍文字说明介绍文字说明介绍文字说明介绍文字说明介绍&quot; showIcon&gt;&lt;/Alert&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h1>API</h1>
    <h2>Alert props</h2>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <h2>Alert events</h2>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>
</template>
<script>
export default {
  name: 'test-alert',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '类型',
          key: 'type',
          tooltip: true
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableColumn1: [
        {
          title: '事件名称',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '回调参数',
          key: 'callBack'
        }
      ],
      tableData: [
        {
          attribute: 'type',
          explain: '主题',
          type: 'String | success/warning/info/error',
          default: 'info'
        },
        {
          attribute: 'title',
          explain: '标题，必选参数',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'description',
          explain: '辅助性文字',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'closable',
          explain: '是否可关闭',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'center',
          explain: '文字是否居中',
          type: 'Boolean',
          default: 'true'
        },
        {
          attribute: 'closeText',
          explain: '关闭按钮自定义文本',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'showIcon',
          explain: '是否显示图标',
          type: 'Boolean',
          default: 'false'
        }
      ],
      tableData1: [
        {
          attribute: 'close',
          explain: '关闭alert时触发的事件',
          callBack: '-'
        }
      ],
      isClosable: false,
      ctext: '知道了!'
    }
  },
  methods: {
    clickClose () {
      alert('你好！我是回调函数~')
    }
  }
}
</script>
<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p{
  padding: 10px 0;
}
.testAlert {
  width: 500px;
  display:flex;
  align-items: center;
  flex-direction: column;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
</style>
